import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { NavBar } from '@nutui/nutui-react-taro';
import HomeSvg from '@/assets/svg/home.svg';
import './index.global.scss';

export default function NaviBar(props) {

  const {
    className,
    title,
    home,
    loading,
    delta = 1,
    color = '#fff',
    background = 'var(--primary-color)',
  } = props;

  // const isSupport = !!wx.getMenuButtonBoundingClientRect;
  // const rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : { left: 0 };
  const windowInfo = wx.getWindowInfo();
  const deviceInfo = wx.getDeviceInfo();
  const ios = !!(deviceInfo.system?.toLowerCase().search('ios') + 1);
  const statusBarHeight = windowInfo.statusBarHeight;
  // const innerWidth = isSupport ? `width:${windowInfo.windowWidth}px;` : '',
  // const innerPaddingRight = isSupport ? `padding-right:${windowInfo.windowWidth - rect.left}px` : '';
  // const leftWidth = isSupport ? `width:${res.windowWidth - rect.left}px` : ''

  const pages = getCurrentPages();
  const back = pages.length > 1;

  const style = React.useMemo(() => {
    return { color, background, paddingTop: `${statusBarHeight}px` }
  }, [color, background, statusBarHeight]);

  const onBack = () => {
    Taro.navigateBack({ delta });
  }

  const onHome = () => {
    Taro.reLaunch({ url: '/pages/index/index' });
  }

  React.useEffect(() => {
    wx.setNavigationBarTitle({ title });
  }, [title]);
  
  return (    
    <view className={`weui-navigation-bar navi-bar ${className}`} style={style}>
      <view className={`weui-navigation-bar__inner ${ios ? 'ios' : 'android'}`}>
        <view className="weui-navigation-bar__left">
          {
            back && (
              <view className="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback" onClick={onBack}>
                <view
                  bindtap="back"
                  className="weui-navigation-bar__btn_goback_wrapper"
                  hover-className="weui-active"
                  aria-role="button"
                  aria-label="返回"
                >
                  <text role="img" class="weui-icon-back-arrow" style={{ color }}></text>
                </view>
              </view>
            )
          }

          {
            home && (
              <view className="weui-navigation-bar__buttons" onClick={onHome}>
                <view
                  bindtap="home"
                  className="weui-navigation-bar__btn_goback_wrapper"
                  hover-className="weui-active"
                  aria-role="button"
                  aria-label="首页"
                >
                  <view className="weui-navigation-bar__button weui-navigation-bar__btn_home">
                    <view
                      className="weui-icon weui-icon__home"
                      style={{
                        background: color,
                        width: '24px',
                        height: '24px',
                        maskImage: `url(${HomeSvg})`,
                        '-webkit-mask-image': `url(${HomeSvg})`,
                        '-moz-mask-image': `url(${HomeSvg})`
                      }}
                    />
                  </view>
                </view>
              </view>
            )
          }
        </view>

        <view className='weui-navigation-bar__center'>
          {
            loading && (
              <view className="weui-navigation-bar__loading" aria-role="alert">
                <view
                  className="weui-loading"
                  aria-role="img"
                  aria-label="加载中"
                ></view>
              </view>
            )
          }
          <text>{title}</text>
        </view>

        <view className='weui-navigation-bar__right'>
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  );
}
